<template>
  <div class="body">
    <div class="Basic">
      <span>活動信息</span>
    </div>
    <div class="ChineseName">
      <span class="red">&nbsp;</span>
      <span class="Name">活動主題</span>
      <input placeholder="活動主題" v-model="form.title">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="red">&nbsp;</span>
      <span class="Name">活動開始時間</span>
      <span>
        <am-input type="datetime-local" v-model="form.start_time" placeholder="YYYY/MM/DD"></am-input>
      </span>

      <!-- <span id="result1" data-options="{}" class="btn1 mui-btn mui-btn-block">YYYY/MM/DD</span> -->
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="red">&nbsp;</span>
      <span class="Name">活動结束时间</span>
      <am-input type="datetime-local" v-model="form.end_time" placeholder="YYYY/MM/DD"></am-input>
      <!-- <span id="result" data-options="{}" class="btn mui-btn mui-btn-block">YYYY/MM/DD</span> -->
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="red">&nbsp;</span>
      <span class="Name">報名截止時間</span>
      <am-input type="datetime-local" v-model="form.close_time" placeholder="YYYY/MM/DD"></am-input>
      <!-- <span id="result3" data-options="{}" class="btn3 mui-btn mui-btn-block">YYYY/MM/DD</span> -->
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="red">&nbsp;</span>
      <span class="Name">活動範圍</span>
      <select id="myselect" v-model="form.vip">
        <option value="0" selected>公开活动</option>
        <option value="1">内部活动</option>
      </select>
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="chin">人數</span>
      <input v-model="form.limit" placeholder="人數">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="chin">費用</span>
      <input v-model="form.cost" placeholder="費用">
    </div>
    <div class="gray"></div>
    <div class="ChineseName">
      <span class="red">&nbsp;</span>
      <span class="Name">活動地址</span>
      <input v-model="form.address" placeholder="活動地址">
    </div>
    <div class="gray"></div>
    <div class="ChineseName bb">
      <span class="red">&nbsp;</span>
      <span class="Name">聯係電話</span>
      <input v-model="form.phone" placeholder="聯係電話">
    </div>
    <div class="gray"></div>
    <div class="ChineseName bb">
      <span class="red">&nbsp;</span>
      <span class="Name">活動封面</span>
      <a class="ui-upload">
        <input type="file" id="fileUp" ref="imgInput" @change="upload" accept="image/png, image/jpeg, image/jpg">上传
      </a>
    </div>
    <div class="content">
      <div class="top_photo">
        <img :src="photo" alt="">
      </div>
    </div>
    <div class="gray"></div>
    <div class="ChineseName bb">
      <span class="red">&nbsp;</span>
      <span class="Name">活动内容</span>
    </div>
    <div id="toolbar" class="toolbar"></div>
    <div id="editor"></div>
    <button id="button" @click="add()">确认提交</button>
  </div>
</template>

<script>
import { addActivity } from '@/api/society'
import Editor from 'wangeditor'
import axios from 'axios'
import 'wangeditor/release/wangEditor.min.css'
var editor = new Editor('#toolbar', '#editor')
export default {
  name: 'AddActivity',
  data () {
    return {
      form: {
        title: '',
        limit: '',
        cost: '',
        address: '',
        phone: '',
        content: '',
        pid: '',
        start_time: '',
        end_time: '',
        close_time: '',
        vip: '',
        sid: this.$route.query.sid
      },
      photo: ''
    }
  },
  mounted () {
    editor.customConfig.menus = [
      'head', // 标题
      // 'bold', // 粗体//'italic', // 斜体//'underline', // 下划线//'strikeThrough', // 删除线//'foreColor', // 文字颜色//'backColor', // 背景颜色
      'link', // 插入链接
      // 'list', // 列表
      'justify', // 对齐方式
      // 'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格//'video', // 插入视频//'code', // 插入代码//'quote', // 引用
      'undo', // 撤销
      'redo' // 重复
    ]
    // 上传图片
    editor.customConfig.uploadImgTimeout = 20000
    editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024
    editor.customConfig.uploadImgServer = '/index.php/system/image/upload'
    editor.customConfig.uploadFileName = 'image'
    editor.customConfig.withCredentials = true
    editor.customConfig.uploadImgParams = {
      type: 'email'
    }
    editor.customConfig.onchange = (html) => {
      this.form.content = html
    }
    editor.customConfig.uploadImgHooks = {

      success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },
      timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function (insertImg, result, editor) {
        console.log(result)
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.data.path
        insertImg(url)

        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }
    // 自定义上传事件
    editor.customConfig.hideLinkImg = true
    editor.create()
  },
  methods: {
    upload () {
      const image = new FormData()
      image.append('image', this.$refs.imgInput.files[0])
      image.append('type', 'activity')
      axios.post('think.php/system/image/upload', image, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.code === 1) {
          alert('上传成功')
          this.form.pid = res.data.data.pid
          this.photo = 'http://weyouth.vip' + res.data.data.path
        }
      }).catch(err => {
        console.log(err)
      })
    },
    add () {
      this.form.start_time = this.form.start_time.replace('T', ' ')
      this.form.end_time = this.form.end_time.replace('T', ' ')
      this.form.close_time = this.form.close_time.replace('T', ' ')
      console.log(this.form)
      if (this.form.title !== '' && this.form.limit !== '' && this.form.cost !== '' && this.form.address !== '' && this.form.phone !== '' && this.form.start_time !== '' && this.form.end_time !== '' && this.form.pid !== '') {
        addActivity(this.form).then(res => {
          console.log(res)
          if (res.code === 1) {
            alert('提交成功')
            this.$router.go(-1)
          } else {
            alert('提交失敗')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        alert('請填寫完整信息后提交')
      }
    }
  }
}
</script>

<style type="text/css" scoped>
/* @import '../style/css/mui.min'; */
* {
  margin: 0;
  padding: 0;
}

.body {
  background: rgb(255, 255, 255);
  font-family: PingFang SC;
}
.w-e-text-container {
  height: 400px;
}
.Basic {
  line-height: 40px;
  height: 40px;
  color: rgba(160, 160, 160, 1);
  background: rgba(250, 249, 247, 1);
}

.Basic span {
  margin-left: 16px;
}
.am-form-field {
  display: inline-block;
  width: 200px !important;
}
.ChineseName {
  height: 50px;
  line-height: 50px;
  background: rgb(255, 255, 255);
}

.red {
  margin-left: 6px;
  color: red;
  width: 7px;
  height: 20px;
  font-size: 14px;
}

.Name {
  margin-left: -2px;
  font-size: 15px;
}

.ChineseName input {
  margin-left: 12px;
  border: 0px;
  height: 21px;
  font-size: 15px;
  outline: none;
  width: 70%;
}

.gray {
  width: 344px;
  height: 1px;
  background: rgba(245, 245, 245, 1);
  opacity: 1;
}

#sexuality {
  color: rgb(160, 160, 160);
  background: rgb(255, 255, 255);
  border: none;
  margin-left: 30px;
  font-size: 15px;
  height: 21px;
  outline: none;
}

.butto {
  width: 74.67%;
  margin: 32px auto auto auto;
  height: 44px;
}

.butto button {
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
  font-size: 16px;
  width: 100%;
  border: solid 1px rgba(249, 119, 130, 1);
  border-radius: 30px;
  height: 44px;
  background: rgba(249, 119, 130, 1);
  box-shadow: 0px 3px 6px rgba(249, 119, 130, 0.4);
  border-radius: 54px;
  outline: none;
}

.chin {
  margin-left: 17px;
}

#sexua {
  margin-left: 1px;
  background: rgb(255, 255, 255);
  color: rgb(160, 160, 160);
  border: none;
  font-size: 15px;
  height: 21px;
  outline: none;
}

.bar {
  color: rgb(204, 204, 204);
  margin-right: 2px;
}

.residents {
  font-size: 15px;
  color: rgba(22, 22, 22, 1);
}

.mopic {
  margin: 20px 18px 0 7px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}

.mui-btn {
  font-size: 16px;
}

#result {
  width: 200px !important;
  display: inline-block;
}

.content {
  width: 90%;
  margin-left: 5%;
  font-size: 16px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  background: white !important;
}

.top_photo {
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.top_photo img {
  width: 100%;
}

#toolbar {
  width: 92%;
  margin-left: 4%;
  background: white;
  position: absolute;
  border-radius: 5px 5px 0 0;
}

#editor {
  width: 100%;
  padding-top: 30px;
}

#editor p {
  font-size: 16px;
  color: grey;
}

#button {
  margin: 40px auto 20px auto;
  width: 80%;
  height: 50px;
  margin-left: 5%;
  border-radius: 10px;
  background: rgb(249, 119, 130);
  border: none;
  font-size: 20px;
  color: white;
  outline: none;
  margin-left: 10%;
}

.w-e-text {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px !important;
  background: rgb(249, 250, 251);
}

#Number {
  width: 60px;
}

.mui-btn-block {
  font-size: 15px !important;
}

select {
  color: rgb(160, 160, 160);
  background: rgb(255, 255, 255);
  border: none;
  font-size: 15px;
  height: 21px;
  outline: none;
}

.ui-upload {
  font-size: 14px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  position: relative;
  color: #fff;
  background: #00abff;
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  top: 10px;
  left: 5px;
}

.ui-upload input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}
.mui-dtpicker-title h5 {
  width: 14.9% !important;
}
</style>
